<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="../lib/vue.js"></script>

    <script type="text/x-template" id="my-button-template">
      <button>按钮1</button>
    </script>

    <script>
      Vue.component("my-button", {
        // 1. template 直接使用字符串
        // template: `
        //   <button>按钮1</button>
        // `,
        // 2. template 引用 x-template 模板的方式
        template: "#my-button-template",
        // render(h) {
        //   return h("button", null, "按钮2");
        // },
      });

      Vue.component("myP", {
        template: `
          <p>myP</p>
        `,
      });

      Vue.component("MyImg", {
        template: `
          <p>MyImg</p>
        `,
      });

      const vm = new Vue({
        el: "#app",

        template: `
          <div id="app">
            <my-button></my-button>

            <myP></myP>

            <MyImg></MyImg>
          </div>
        `,
      });
    </script>
  </body>
</html>
